<!doctype html>
<html lang="en">
<head>
    <title>Menu - Menu Bar</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="%description%" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    
    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    
    <link href="../../themes/wijmo/jquery.wijmo.wijsuperpanel.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijmenu.css" rel="stylesheet" type="text/css" />
    <script src="../../external/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.bgiframe-2.1.3-pre.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijutil.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijsuperpanel.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijmenu.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#menu1").wijmenu({
                mode: "sliding"
                //orientation: 'vertical',
            });
            $("#previous").click(function () {
                $("#menu1").focus().wijmenu("previous");
            });
            $("#next").click(function () {
                $("#menu1").focus().wijmenu("next");
            });
            $("#previousPage").click(function () {
                $("#menu1").focus().wijmenu("previousPage");
            });
            $("#nextPage").click(function () {
                $("#menu1").focus().wijmenu("nextPage");
            });
        });
    </script>
    <style type="text/css">
        p
        {
            margin: 15px 0;
        }
        p button
        {
            margin: 0 5px 0 0;
        }
    </style>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Menu Bar</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <ul id="menu1">
                <li><a href="#">MenuItem</a></li>
                <li><a href="#">Breaking News</a>
                    <ul>
                        <li class="header">
                            <h3>
                                header2</h3>
                        </li>
                        <li class="separator">s1</li>
                        <li><a href="#">Entertainment</a></li>
                        <li><a href="http://www.w3schools.com/tags/html5.asp">Politics</a></li>
                        <li><a href="#">A&amp;E</a></li>
                        <li><a href="#">Sports</a> </li>
                        <li><a href="#">Local</a></li>
                        <li><a href="#">Health</a></li>
                    </ul>
                </li>
                <li><a href="#">Entertainment</a>
                    <ul>
                        <li><a href="#">Celebrity news</a></li>
                        <li><a href="#">Gossip</a></li>
                        <li><a href="#">Movies</a></li>
                        <li><a href="#">Music</a>
                            <ul>
                                <li><a href="#">Alternative</a></li>
                                <li><a href="#">Country</a></li>
                                <li><a href="#">Dance</a></li>
                                <li><a href="#">Electronica</a></li>
                                <li><a href="#">Metal</a></li>
                                <li><a href="#">Pop</a></li>
                                <li><a href="#">Rock</a>
                                    <ul>
                                        <li><a href="#">Bands</a>
                                            <ul>
                                                <li><a href="#">Dokken</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="#">Fan Clubs</a></li>
                                        <li><a href="#">Songs</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Slide shows</a></li>
                        <li><a href="#">Red carpet</a></li>
                    </ul>
                </li>
                <li><a href="#">Finance</a>
                    <ul>
                        <li><a href="#">Personal</a>
                            <ul>
                                <li><a href="#">Loans</a></li>
                                <li><a href="#">Savings</a></li>
                                <li><a href="#">Mortgage</a></li>
                                <li><a href="#">Debt</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Business</a></li>
                    </ul>
                </li>
                <li><a href="#">Food &#38; Cooking</a>
                    <ul>
                        <li><a href="#">Breakfast</a></li>
                        <li><a href="#">Lunch</a></li>
                        <li><a href="#">Dinner</a></li>
                        <li><a href="#">Dessert</a>
                            <ul>
                                <li><a href="#">Dump Cake</a></li>
                                <li><a href="#">Doritos</a></li>
                                <li><a href="#">Both please.</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Lifestyle</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Politics</a></li>
                <li><a href="#">Sports</a></li>
                <li><a href="#">Novels</a></li>
                <li><a href="#">Magazine</a></li>
                <li><a href="#">Books</a></li>
                <li><a href="#">Education</a></li>
            </ul>
            <p>
                <button id="previous">
                    previous</button>
                <button id="next">
                        next</button>
                <button id="previousPage">
                            previousPage</button>
                <button id="nextPage">
                                nextPage</button></p>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
<p>This sample shows to the <b>itemFocus.wijmenu</b> and <b>itemClick.wijmenu</b> events can be used to click through menu items.
        </div>
    </div>
</body>
</html>
